<template>
  <view class="container">
	<view class="avatar">
		<image></image>
	</view>
	<u--form labelPosition="left" labelWidth="200rpx" :model="model1" :rules="rules" ref="uForm">
		<u-form-item label="用户昵称" prop="userInfo.name" borderBottom >
			<u--input v-model="model1.userInfo.name" border="none" placeholder="请输入"></u--input>
		</u-form-item>
		<u-form-item label="用户ID" prop="userInfo.id" borderBottom >
			<u--input v-model="model1.userInfo.id" border="none" placeholder="自动生成,禁止输入" disabled disabledColor="none"></u--input>
		</u-form-item>
		<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="show = true">
		<u--input disabled border="none" disabledColor="none" placeholder="请选择" v-model="model1.userInfo.sex" ></u--input>
		<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>
		<u-form-item label="微信号" prop="userInfo.WeChat" borderBottom >
			<u--input v-model="model1.userInfo.WeChat" border="none" placeholder="请输入"></u--input>
		</u-form-item>
		<u-form-item label="手机号" prop="userInfo.phone" borderBottom >
			<u--input v-model="model1.userInfo.phone" border="none" placeholder="请输入"></u--input>
		</u-form-item>
		<u-form-item label="电子邮箱" prop="userInfo.email" borderBottom >
			<u--input v-model="model1.userInfo.email" border="none" placeholder="请输入"></u--input>
		</u-form-item>
	</u--form>
	<button type="primary" style="background-color: #E99D42;margin-top:20px;">确认</button>
	<u-action-sheet :show='show' :actions="actions" title="请选择性别" @close="show=false" @select="select">
	</u-action-sheet>
  </view>
</template>

<script>
  

  export default {
    data() {
      return {
		   show: false,
		model1: {
			userInfo: {
				name: '',
				id:'',
				sex:'',
				WeChat:'',
				phone:'',
				email:''
			}
      },
	  actions:[{
	  			 name:'男'
	  },
	  {
		  name:'女'
	  }
	  ],
	  rules: {
	  	'userInfo.name': {
	  		type: 'string',
	  		required: true,
	  		message: '请填写用户昵称',
	  		trigger: ['blur', 'change']
	  	},
		'userInfo.sex': {
			type: 'string',
			required: true,
			message: '请选择性别',
			trigger: ['blur', 'change']
		},
		'userInfo.WeChat': {
			type: 'string',
			required: true,
			message: '请填写微信号',
			trigger: ['blur', 'change']
		},
		'userInfo.phone': {
			type: 'string',
			required: true,
			message: '请填写手机号',
			trigger: ['blur', 'change']
		},
	}
 }
 },
    onLoad() {
     
    },
    methods: {
	select(e){
		this.model1.userInfo.sex=e.name;
		this.$refs.uForm.validateField('sex');
	},
    }
  }
</script>

<style lang="scss">
.container{
	width: 95%;
	margin:auto;
}
 .avatar{
	 width: 200rpx;
	 height: 200rpx;
	 background-color:#CECECE;
	 border-radius: 50%;
	 margin: auto;
	 margin-top: 100rpx;
	 margin-bottom: 100rpx;
 }
 
</style>
